<template>
  <div class="my-container">
    <!-- 登录状态 -->
    <div v-if="user" class="header login">
      <div class="baseinfo">
        <div class="left">
          <img :src="user_message.photo" class="pic-login" />
          <span class="text">{{ user_message.name }}</span>
        </div>
        <div class="right">
          <van-button
            type="mini"
            class="btn"
            round
            @click="$router.push('/user/userprofile')"
            >编辑资料</van-button
          >
        </div>
      </div>

      <div class="baseMsg">
        <div class="item">
          <span class="num">{{ user_message.art_count }}</span>
          <span class="text">头条</span>
        </div>
        <div class="item">
          <span class="num">{{ user_message.follow_count }}</span>
          <span class="text">关注</span>
        </div>
        <div class="item">
          <span class="num">{{ user_message.fans_count }}</span>
          <span class="text">粉丝</span>
        </div>
        <div class="item">
          <span class="num">{{ user_message.like_count }}</span>
          <span class="text">获赞</span>
        </div>
      </div>
    </div>
    <!-- 未登录状态 -->
    <div class="header unlogin" v-else>
      <div class="header-btn" @click="$router.push('/login')">
        <img src="@/assets/mobile.png" class="pic-unlogin" />
        <span><a>登录</a>/<a>注册</a></span>
      </div>
    </div>

    <!-- 宫格导航 -->
    <van-grid :border="true" :column-num="2" class="nav" clickable>
      <van-grid-item class="shoucang">
        <i slot="icon" class="iconfont icon-shoucang"></i>
        <span slot="text" class="text">收藏</span>
      </van-grid-item>
      <van-grid-item class="lishi">
        <i slot="icon" class="iconfont icon-lishi"></i>
        <span slot="text" class="text">历史</span>
      </van-grid-item>
    </van-grid>
    <!-- 功能列表 -->
    <van-cell-group class="list">
      <van-cell is-link class="item">
        <span slot="title" class="text">消息通知</span>
      </van-cell>
      <van-cell is-link class="item">
        <span slot="title" class="text">消息通知</span>
      </van-cell>
    </van-cell-group>
    <!-- 退出按钮 -->
    <van-cell-group class="exit" v-if="user">
      <van-cell class="item" clickable>
        <span slot="title" class="text" @click="onexit">退出登录</span>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
import { getuserinfo } from '@/api/user.js'
export default {
  data() {
    return {
      user_message: {}
    }
  },
  methods: {
    onexit() {
      Dialog.confirm({
        title: '提示',
        message: '确定退出登录吗？'
      })
        .catch(() => {
          // on cancel
        })
        .then(() => {
          // on confirm
          this.setUser(null) // 将user设为空
        })
    },
    ...mapMutations(['setUser']),
    async getuserinfo() {
      const res = await getuserinfo()
      this.user_message = res.data.data
      console.log(this.user_message)
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    this.getuserinfo()
  }
}
</script>

<style lang="less">
// 头部信息
.my-container {
  .header {
    height: 401px;
    background: url(~@/assets/banner.png) no-repeat;
    background-size: cover;
  }
  // 未登录状态
  .unlogin {
    display: flex;
    justify-content: center;
    align-items: center;
    .header-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 28px;
      color: #fff;
      .pic-unlogin {
        width: 132px;
        height: 132px;
        margin-bottom: 15px;
      }
    }
  }
  // 登录状态
  .login {
    .baseinfo {
      box-sizing: border-box;
      padding: 116px 32px 55px;
      display: flex;
      justify-content: space-between;
    }
    .left {
      display: flex;
      align-items: center;
      .pic-login {
        margin-right: 22px;
        width: 132px;
        height: 132px;
      }
      .text {
        font-size: 30px;
        color: #fff;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .btn {
        border: none;
        font-size: 20px;
        color: #666;
      }
    }
    .baseMsg {
      display: flex;
      .item {
        display: flex;
        flex-direction: column;
        flex: 1;
        .num {
          font-family: ArialMT;
          font-size: 36px;
          color: #fff;
        }
        .text {
          font-size: 23px;
          color: #fff;
        }
      }
    }
  }

  // 收藏和历史
  .nav {
    .text {
      font-size: 28px;
      color: #333333;
    }
    .shoucang {
      height: 141px;
      .iconfont {
        font-size: 45px;
        color: #eb5253;
      }
    }
    .lishi {
      height: 141px;
      .iconfont {
        font-size: 45px;
        color: #ff9d1d;
      }
    }
  }

  // 功能列表
  .list {
    margin-top: 9px;
    .item {
      font-size: 30px;
      color: #333;
      text-align: left;
    }
  }
  // 退出按钮
  .exit {
    margin-top: 9px;
    .item {
      color: #d86262;
      font-size: 30px;
    }
  }
}
</style>
